<template>
	<div class="message">
		<h1>Message</h1>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import mitter from "@/plugins/mitt";

export interface Message {
	title: string;
	date: string;
}
let tableData = ref<Message[]>([]),
	messageNum = ref(0),
	loading = ref(true);

function clearNoRead() {
	messageNum.value = 0;
	mitter.$emit("clearNoReadMessage");
}

function getData() {
	setTimeout(() => {
		tableData.value = [
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2020-06-18 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2020-03-18 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2020-01-18 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-12-18 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-11-18 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-10-16 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-09-22 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-08-05 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-07-10 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-06-11 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-05-20 20:00:00",
			},
			{
				title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
				date: "2019-04-19 20:00:00",
			},
		];
		messageNum.value = 4;
		loading.value = false;
	}, 1000);
}

onMounted(() => {
	getData();
});
</script>

<style lang="scss" scoped>
.message {
	width: 100%;
	height: 100%;
}
.badge::before {
	content: "*";
	color: red;
	font-size: 22px;
}

:deep(.el-table__expanded-cell) {
	background-color: #f0f2f5;
	&:hover {
		background-color: #f0f2f5 !important;
	}
}
</style>
